import React, { useState, useEffect } from 'react'
import { Switch, Link, Route, useRouteMatch } from 'react-router-dom'
import { useSelector } from 'react-redux'
import http from '../utils/http'

function Home(props) {
  const [categories, setCategory] = useState([])
  const select = useSelector(state => state.user)
  const { path, url } = useRouteMatch()
  console.log(select, props, path, url);

  useEffect(() => {
    http.get('/api/category').then(res => { setCategory([...res.data.data]) })
  }, [])
  return (
    <div className="home">
      <header>
        {categories.map(item => {
          return <Link key={item._id} to={`${url}${item.cate_path}`}>{item.categoryName}</Link>
        })}
      </header>
      <Switch>
        {/* <div className="content">
            {
              props.routes.map(item => <Route path={item.path} component={item.component} key={item.path} />)
            }
          </div> */}
        {props.routes.map(item => <Route path={item.path} key={item.path} children={<item.component />}></Route>)}
      </Switch>
    </div>
  )
}

export default Home